<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 -->
         <el-row>
          <!-- 说明 -->
          <el-col :span="12">
            <span style="color:pink;font-size:12px">说明：目前支持学科和关键字条件筛选</span>
          </el-col>
          <!-- 新增试题 -->
          <el-col :span="12">
            <el-button style="float:right" size="small" type="success" icon="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button>
          </el-col>
        </el-row>
        <!-- 表单 -->
        <el-form style="margin-top:15px" :model="formdate" :label-position="labelPosition" label-width="80px"  ref="refForm" >
          <!-- 第一行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                   placeholder="请选择"
                   v-model="formdate.subjectID"
                    @change="changeSubject">
                      <el-option
                    v-for="item in SubjectList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
                 </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" >
               <el-select placeholder="请选择" v-model="formdate.catalogID"
    @click.native="getdirectory">
      <el-option
      v-for="item in catalogList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      ></el-option>
    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select placeholder="请选择"  v-model="formdate.tags">
      <el-option
       v-for="item in tagList"
      :key="item.value"
      :label="item.label"
      :value="item.value"></el-option>
    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input  v-model="formdate.keyword" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="试题类型">
               <el-select placeholder="请选择" v-model="formdate.questionType">
       <el-option
       v-for="item in questionType"
       :key="item.value"
       :label="item.label"
       :value="item.value"
       ></el-option>
          </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
              <el-select placeholder="请选择"  v-model="formdate.difficulty">
       <el-option
       v-for="item in difficulty"
       :key="item.value"
       :label="item.label"
       :value="item.value"
       ></el-option>
    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select
    placeholder="请选择"
    v-model="formdate.direction"
    @click.native="getdirection">
      <el-option
      v-for="item in direction"
      :key="item.direction"
      :label="item.direction"
      :value="item.direction"
      ></el-option>
    </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                 <el-select
    placeholder="请选择"
    v-model="formdate.creator"
    @click.native="getcreator">
      <el-option
      v-for="item in creatorList"
      :key="item.id"
      :label="item.username"
      :value="item.id"
      ></el-option>
    </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input  placeholder="请输入内容"  v-model="formdate.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
              <el-input v-model="formdate.enterprise" placeholder="请输入内容"></el-input>

              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
              <el-row type="flex" justify="space-between">
 <el-col :span="11">
<el-select v-model="formdate.province" placeholder="请选择" @change="changeProvinces">
   <el-option v-for="item in provinces" :key="item" :label="item" :value="item"></el-option>
  </el-select>
 </el-col>
 <el-col :span="12">
  <el-select v-model="formdate.city" placeholder="请选择">
 <el-option v-for="item in citys" :key="item" :label="item" :value="item"></el-option>
  </el-select>
 </el-col>
 </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="float:right">
                <el-button size="small" @click="clear()">清除</el-button>
                <el-button size="small" type="primary" @click="search()">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
   <!-- 中间数据 -->
   <el-alert
   class="el-icon-info"
   :title="`数据共有${total}条`"
   type="info"
   :closable="false"
>
   </el-alert>
   <!-- 底部 -->
       <el-table
       :data="tableData"
       style="width: 100%"
       class="el-table"
       >
      <el-table-column prop="number" label="试题编号" width="180">
</el-table-column>
      <el-table-column prop="subject" label="学科" width="180">
      </el-table-column>
      <el-table-column prop="catalog" label="目录">
      </el-table-column>
        <el-table-column prop="questionType" label="题型"
        :formatter="formatType">
      </el-table-column>
      <!-- 通过插槽处理html样式 -->
       <el-table-column prop="question" label="题干">
        <template #default="scope">
          <div v-html="scope.row.question"></div>
        </template>
      </el-table-column>
      <!-- 通过插槽处理时间格式 -->
      <el-table-column prop="addDate" label="录入时间">
          <template #default="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
      </el-table-column>
       <el-table-column prop="difficulty" label="难度"
       :formatter="formatType1">
      </el-table-column>
      <el-table-column prop="creator" label="录入人">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="{row}">
   <el-button
           @click="previewTopic(row)"
              size="small"
              circle
              plain
              type="primary"
              icon="el-icon-view"
              title="预览"
            ></el-button>
            <el-button
             @click="editpreview(row)"
              size="small"
              circle
              plain
              type="success"
              icon="el-icon-edit"
              title="修改"
            ></el-button>
            <el-button
              @click="del(row)"
              size="small"
              circle
              plain
              type="danger"
              icon="el-icon-delete"
              title="删除"
            ></el-button>
            <el-button
               @click="selected(row)"
              size="small"
              circle
              plain
              type="warning"
              icon="el-icon-check"
              title="加入精选"
            ></el-button>

        </template>

      </el-table-column>
      <!-- <Table></Table> -->
    </el-table>
    <!-- 分页 -->
     <div class="block">
    <el-pagination
    background
    style="margin-top:20px;display:flex;justify-content:end"
    layout="prev, pager, next, sizes, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formdate.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="formdate.pagesize"
      :total="total">
    </el-pagination>
  </div>
  <!-- 预览表格 -->
  <Questionspreview :isShowDialog.sync="isShowDialog" :topicData="topicData" :isVideo.sync="isVideo" :optionsList="optionsList"></Questionspreview>
      </el-card>
    </div>
  </div>
</template>

<script>
// 学科的接口
import { simple as SubjectList } from '@/api/hmmm/subjects.js'
// 删除 详情 列表  精选题库加入取消(choiceAdd)
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions.js'
// 方向的接口
import { direction, difficulty, questionType } from '@/api/hmmm/constants.js'
// 录入人接口
import { simple as userList } from '@/api/base/users.js'
// 省市调用写好的citys页面
import { provinces, citys } from '@/api/hmmm/citys.js'
// 目录
import { simple as directoryList } from '@/api/hmmm/directorys.js'
// 标签
import { simple as tagsList } from '@/api/hmmm/tags.js'
// 表格
import Questionspreview from '../components/questions-preview.vue'
export default {
  components: {
    Questionspreview
  },
  data () {
    return {
      labelPosition: 'right', // 表单域文本右对齐
      // 表格绑定的数据
      formdate: {
      // // 分页的数据
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        questionType: null, // 试题类型
        remarks: null, // 题目备注
        catalogID: null, // 目录
        difficulty: null, // 难度
        enterprise: null, // 企业简称
        tags: null, // 标签
        direction: null, // 方向
        province: null, // 城市
        city: null, // 市县
        keyword: null, // 关键字
        creator: null// 录入人
      },
      // 标签
      tagList: [],
      // 录入人
      creatorList: [],
      // creatorPage: {
      //   page: 1,
      //   pagesize: 999
      // },
      questionType: questionType, // 题型
      difficulty: difficulty, // 难度
      direction: [], // 方向
      provinces: [],
      citys: [], // 县
      tableData: [],
      // 存放学科的数据
      SubjectList: [],
      // 学科下拉框的数据
      // page1: {
      //   page: 1,
      //   pagesize: 999
      // },
      // 二级目录
      catalogList: [],
      value: '',
      total: 0,
      isShowDialog: false,
      topicData: {},
      isVideo: false,
      optionsList: []
    }
  },
  created () {
    this.getSubject()
    this.getQuestions()
    this.provinces = provinces() // 获取省
  },
  methods: {
    // 获取省市
    changeProvinces (val) {
      this.formdate.city = ''
      this.citys = citys(val)
    },
    // 点击修改
    editpreview (row) {
      console.log(row)
      this.$router.push(`new?id=${row.id}`)
    },
    // 加入精选
    selected (row) {
      this.$confirm('此操作会将改题目加入精选，是否继续', '提示提示').then(async () => {
        // const res = await choiceAdd({ id: row.id, choiceState: 1 })
        // console/log(res)
        await choiceAdd({ id: row.id, choiceState: 1 })
        this.$message.success('加入精选题库成功')
        this.getQuestions()
      }).catch(() => {
        this.$message.warning('加入精选题库失败')
      })
    },
    // 预览功能(点击弹窗会触发 $nextTick一步DOM操作)
    async previewTopic (previewdata) {
      this.isShowDialog = true
      const { data } = await detail(previewdata)
      this.topicData = data
      // console.log(data)
      this.optionsList = data.options
    },

    // 搜索的方法
    search () {
      // const Alldata = { ...this.formdate, ...this.data }
      // // 只搜索搜索数据的其他的删除
      // for (const key in Alldata) {
      //   if (Alldata[key] === '') {
      //     delete Alldata[key]
      //   }
      // }
      // const { data } = await list(Alldata)
      // // console.log(data)
      // this.tableData = data.items
      this.formdate.page = 1
      this.getQuestions()
    },
    // 清除的方法
    clear () {
      this.$refs.refForm.resetFields()
      this.formdate = {
      // // 分页的数据
        page: 1,
        pagesize: 5,
        subjectID: null, // 学科
        questionType: null, // 试题类型
        remarks: null, // 题目备注
        catalogID: null, // 目录
        difficulty: null, // 难度
        enterprise: null, // 企业简称
        tags: null, // 标签
        direction: null, // 方向
        province: null, // 城市
        city: null, // 市县
        keyword: null, // 关键字
        creator: null// 录入人
      }
      this.getQuestions()
    },
    // 删除的方法
    del (row) {
      // console.log('123')
      this.$confirm('真的要删除嘛', '危险危险').then(async () => {
        await remove(row)
        // console.log(res)
        // console.log(id)
        this.$message.success('删除成功啦')
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--
        }
        // 重置表单
        this.getQuestions()
      }).catch(() => {
        // alert('删除失败')
      })
    },
    // 格式化难度
    formatType1 (row, column, cellValue, index) {
      const result1 = difficulty.find(item =>
        item.value === Number(cellValue))
      return result1.label
    },
    // 格式化题型
    formatType (row, column, cellValue, index) {
      const result = questionType.find(item =>
        item.value === Number(cellValue))
      return result.label
    },
    // 获取方向的方法
    getdirection () {
      this.direction = direction.map(item => {
        return { direction: item }
      })
    },
    // 获取录入人的方法
    async getcreator () {
      const { data } = await userList()
      // console.log(res)
      this.creatorList = data
    },
    // 获取基础题库列表
    async getQuestions () {
      const { data } = await list(this.formdate)
      // console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // 选择学科
    async changeSubject (value) {
    // 联动 清除表单
      this.formdate.catalogID = ''
      this.formdate.tags = ''
      const { data } = await directoryList({ subjectID: value })
      // console.log(value)
      this.catalogList = data
      console.log(data)
      const res = await tagsList({ subjectID: value })
      this.tagList = res.data
    },
    // 获取学科下拉框
    async getSubject () {
      const { data } = await SubjectList()
      // console.log(row)
      this.SubjectList = data
    // this.tableData = data
    },
    // 分页
    handleSizeChange (val) {
    // console.log(`每页 ${val} 条`)
      this.formdate.pagesize = val
      // this.formdate.page = 1
      this.getQuestions()
    },
    // 传参，
    handleCurrentChange (newpage) {
      this.formdate.page = newpage
      this.getQuestions()
    }
  }
}
</script>

<style scoped>
.el-select{
  width: 100%;
}
</style>
